<template>
  <div class="landing-page-container">
    <p>
      <span>品牌选择：</span>
      <el-select v-model="brandId" @change="brandChange" filterable placeholder="请选择品牌">
        <el-option v-for="item in brandList" :key="item.id" :label="item.name" :value="item.id"/>
      </el-select>
    </p>
    <div v-if="selectedBrand">
      <span>页面链接：</span>
      <el-input placeholder="请输入url" v-model="pageUri" class="pageurl-input">
        <template slot="prepend">{{selectedBrand.domainName}}</template>
      </el-input>
      <div class="example-text-nl">例: www.zhang8.com.cm/activity，填写: '/activity'</div>
    </div>
    <div class="template-wrap">
      <p class="add-template">
        <span>添加模板：</span>
        <el-select v-model="templateId" filterable placeholder="请选择模板">
          <el-option v-for="item in brandAllTemplate" :key="item.templateId" :label="item.name" :value="item.templateId"/>
        </el-select>
        <el-button class="add-template-btn" @click="addTemplate">添加</el-button>
      </p>
      <div class="template-item" v-for="(item,index) in templateList" :key="index">
        <landing-page v-model="templateList[index]" class="template-content"/>
        <p class="template-handlebtn">
          <el-tooltip content="预览模块" placement="bottom" effect="light">
            <el-button type="primary" circle>预</el-button>
          </el-tooltip>
          <el-tooltip content="删除模块" placement="bottom" effect="light">
            <el-button @click="delTemplate(index)" style="margin: 10px 0 0;" type="danger" icon="el-icon-delete" circle/>
          </el-tooltip>
        </p>
      </div>
    </div>
    <p class="btn-wrap">
      <el-button @click="userPreview">预览</el-button>
      <el-button type="primary" @click="submit">提交</el-button>
    </p>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import LandingPage from '../../components/LandingPage'
export default {
  components: {LandingPage},
  data() {
    return {
      brandId: "",
      pageUri: "",
      selectedBrand: null,
      params: {},
      templateId: '',
      templateList: []
    };
  },
  computed: {
    ...mapState({
      brandList: state => state.addLandingPage.brandList,
      brandAllTemplate: state => state.addLandingPage.brandAllTemplate
    })
  },
  methods: {
    ...mapActions({
      getBrandList: "addLandingPage/getBrandList",
      getAllTempLateByBrandId: "addLandingPage/getAllTempLateByBrandId",
      getTemplateById: "addLandingPage/getTemplateById",
      previewTemplate: "addLandingPage/previewTemplate"
    }),
    initData() {
      this.getBrandList();
    },
    // 品牌切换
    brandChange(brandId) {
      this.selectedBrand = this.brandList.find(({ id }) => id === brandId);
      this.getAllTempLateByBrandId(brandId);
    },
    delTemplate (index) {
      this.templateList.splice(index, 1)
    },
    userPreview() {
      this.previewTemplate({
        templateId: 100100001,
        optionsList: {
          bgimage: {
            label: "背景图片",
            component: "input",
            value: null
          }
        }
      });
    },
    // 添加模板
    async addTemplate() {
      let res = this.templateList.find(item => item.templateId === this.templateId)
      if (!res) {
        res = await this.getTemplateById(this.templateId)
        if (res.error) return this.$message(res.error)
      }
      this.templateList.push(res)
    },
    submit () {
      console.log(this.templateList);
    }
  },
  mounted() {
    this.initData();
  }
};
</script>

<style lang="less" scoped>
.landing-page-container {
  .pageurl-input {
    width: 500px;
  }
  .example-text-nl {
    color: #ccc;
    padding-left: 96px;
    padding-top: 6px;
  }
  .template-wrap {
    margin-top: 16px;
    padding-right: 20px;
    .add-template {
      .add-template-btn {
        margin-left: 10px;
      }
    }
    .template-item {
      margin: 10px 0; 
      padding: 10px;
      border: 1px solid #ccc;
      display: flex;
      .template-content {
        flex: 1;
        padding-right: 20px;
      }
      .template-handlebtn {
        width: 70px;
        text-align: center;
        border-top: 1px solid #eee;
      }
    }
  }
  .btn-wrap {
    text-align: center;
  }
}
</style>